<template>
	<div class="invitation" style='padding: 30rpx;padding-bottom: 20vh;'>
		<div v-if="investCodeUser">
			<div class="invitation_title">受赠人身份信息</div>
			<div class="invitation_user">
				<image class="invitation_img" :src="investCodeUser.avatar" mode=""></image>
				<div>
					<div class="invitation_name">{{investCodeUser.nickname}}</div>
					<div class="invitation_code">手机号：{{investCodeUser.phone}}</div>
					<div class="invitation_code">邀请码：{{investCodeUser.investCode}}</div>
				</div>
			</div>
		</div>
		<div class="invitation_content">
			<div class="invitation-input">
				<p>受赠人</p>
				<input v-model="invitation" placeholder="请输入邀请码/手机号" :readonly=readOnly @input="invitationInput" type="number" />
			</div>
			<div class="invitation-num">
				<p>赠送数量</p>
				<input v-model="number" placeholder="请输入您想转赠的代金券金额" type="number" />
			</div>
		</div>
		<view class='title' v-if="searchList.length>0">历史记录</view>
		<view class='list acea-row' v-if="searchList.length>0">
			<block v-for="(item,index) in searchList" :key="index">
				<view class='item' @tap='setInput(item)'>{{item}}</view>
			</block>
		</view>
		<div class="tips">
			<div style="margin-bottom: 10rpx;font-weight: bold;">*您目前账户【代金券余额】：{{info.balanceVoucher}}元</div>
			<div style="margin-bottom: 10rpx;color: #454545;">*【赠送代金券】赠送操作为自愿转赠行为，请仔细确认被赠送人的身份信息，完成转赠后无法追回！</div>
		</div>
		
		
		
		<div class="whiteBg" style="position: fixed;bottom: 60rpx;left: 30rpx;right: 30rpx;display: flex;align-items: center;">
			<div class="invitation-logo2 bg_color" @click="goBack">我再想想</div>
			<div class="invitation-logo bg_color" :class="number != ''&& number!=0&&investCodeUser?'':'no'" @click="giveWater">确认转赠</div>
		</div>
		<!-- <neil-modal
		    :show="show" 
				:auto-close="false"
		    title="温馨提示" 
				confirm-text="我知道了"
				:confirm-color="isAllSelect?'#E93323':'#333'"
				@cancel="show= false" 
				@confirm="giveWater()"
		    >
				<view class="model-body"  v-if="type==1">
					<view class="model-item">
						<view class="model-text1">1.</view>
						<view class="model-text2">【博士水票】赠送操作即为核销并参与核销补贴活动，赠送完成不可申请退款。</view>
					</view>
					<view class="model-item">
						<view class="model-text1">2.</view>
						<view class="model-text2">被赠送用户获得【赠送水票】仅用于取水或转赠，但不享受核销奖励！</view>
					</view>
					<view class="model-item">
						<view class="model-text1">3.</view>
						<view class="model-text2">以上情况请您已了解并明确理解其具体含义，请谨慎转赠，以免造成不必要的售后问题！您是否确认继续转赠？</view>
					</view>
					<checkbox-group @change="isAllSelect = !isAllSelect">
						<checkbox value="all"><text class='checkAll'>请确认信息是否无误</text></checkbox>
					</checkbox-group>
				</view>
				<view class="model-body"  v-else>
					<view class="model-item">
						<view class="model-text2">【赠送水票】赠送操作为自愿转赠行为，请仔细确认被赠送人的身份信息，完成转赠后无法追回！以上情况请您已了解并明确理解其具体含义，请谨慎转赠，以免造成不必要的售后问题！您是否确认继续转赠？</view>
					</view>
					<checkbox-group @change="isAllSelect = !isAllSelect">
						<checkbox value="all"><text class='checkAll'>请确认信息是否无误</text></checkbox>
					</checkbox-group>
				</view>
				
		</neil-modal> -->
		
		
	</div>
</template>

<script>
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	// #ifdef H5 || APP-PLUS
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	// #endif
	// #ifdef APP-PLUS
	import {
		HTTP_H5_URL
	} from '@/config/app.js';
	// #endif
	
	import {
		findInfo,
		getUserInfo,
		investCodeOrMobile,
		giveVoucher,
		transferWaterLimit,
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import {
		base64src
	} from '@/utils/base64src.js'
	import {
		getQrcode
	} from '@/api/api.js';
	// #endif
	import {setThemeColor} from '@/utils/setTheme.js'
	import {
		imageBase64
	} from "@/api/public";
	export default {
		components: {
			neilModal
		},
		data() {
			return {
				isAllSelect: false,
				show: false,
				type: 1,
				invitation: '',
				readOnly: true,
				investCodeUser: null,
				number: '',
				limit: {},
				searchList: [],
				info: {},
			};
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo']),
		watch: {
			
		},
		onLoad(option) {
			let list = uni.getStorageSync('donationsearch')
			if (list && list.length>0) {
				this.searchList = JSON.parse(list)
			}
			this.type = option.type
			this.getInfo()
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			return {
				
			};
		},
		// #endif
		onReady() {},
		methods: {
			getInfo: function() {
				findInfo({amountType: 51}).then(res => {
					this.info = res.data || {}
				})
			},
			setInput(phone) {
				this.invitation = phone
				this.invitationInput({
					detail: {
						value: phone + ''
					}
				})
			},
			goTxet(id) {
				uni.navigateTo({
					url: '/pages/news/news_details/index?id='+id
				})
			},
			getLimit() {
				transferWaterLimit().then(res => {
					this.limit = res.data || {}
				})
			},
			goBack() {
				uni.navigateBack();
			},
			giveWater() {
				const _this = this
				if (this.number != ''&& this.number!=0&&this.investCodeUser ) {
					giveVoucher({
						receiveUid: _this.investCodeUser.uid,
						voucher: _this.number,
					}).then((res)=>{
						this.$util.Tips({
							title:  "转赠成功"
						})
						setTimeout(()=>{
							_this.goBack()
						}, 1000)
					})
				} else if(this.number == '' || this.number==0) {
					this.$util.Tips({
						title:  "请不要忘了输入数量哦～"
					})
				} else if (!this.investCodeUser) {
					this.$util.Tips({
						title:  "请输入正确的受赠人邀请码/手机号"
					})
					
				}
				
			},
			invitationInput(e) {
				const value = e.detail?.value || ''
				if (value.length == 9 || value.length == 11) {
					investCodeOrMobile(value).then((res) => {
						if (res.data) {
							this.investCodeUser = res.data || null
							let list = JSON.parse(JSON.stringify(this.searchList))
							if ((list.toString()).indexOf(value) == -1) {
								this.searchList.unshift(value)
							}
							if (this.searchList.length>10) {
								this.searchList.pop()
							}
							uni.setStorageSync("donationsearch", JSON.stringify(this.searchList));
						}
					}).catch(err => {
					})
				} else {
					this.investCodeUser  = null
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.list {
	}
	
	.list .item {
		font-size: 26rpx;
		color: #454545;
		padding: 0 21rpx;
		height: 60rpx;
		border-radius: 30rpx;
		line-height: 60rpx;
		border: 1rpx solid #aaa;
		margin: 0 20rpx 20rpx 0;
	}
	.card{
		box-sizing: border-box;
		margin-top: 50rpx;
		font-size: 24rpx;
	}
	.title {
		font-weight: 500;
		font-family: PingFang SC, PingFang SC;
		font-size: 28rpx;
		color: #333;
		margin: 50rpx 0rpx 25rpx 0rpx;
	}
	.checkAll{
		font-size: 24rpx;
		color: #3A84F0;
	}
	.no{
		opacity: 0.5;
	}
	.tips{
		font-size: 24rpx;
		color: #E93323;
	}
	.invitation-num{
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		p{
			font-size: 24rpx;
			color: #333333;
			line-height: 40rpx;
			padding: 20rpx 30rpx;
		}
		input{
			width: 100%;
			padding: 0 30rpx;
			height: 110rpx;
			line-height: 110rpx;
			font-size: 36rpx;
			&::-webkit-input-placeholder{
				color: #B8B8B8;
			}
			&::-moz-placeholder{
				color: #B8B8B8;
			}
			&::-ms-input-placeholder{
				color: #B8B8B8;
			}
		}
	}
	.invitation_title{
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		font-size: 32rpx;
		color: #333333;
	}
	.invitation_user{
		display: flex;
	}
	.invitation_img{
		width: 126rpx;
		height: 126rpx;
		border-radius: 100%;
		margin-right: 20rpx;
	}
	.invitation_name{
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	.invitation_code{
		font-size: 24rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}
	.invitation-logo2{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 86rpx;
		border: 1rpx solid $theme-color;
		margin-right: 60rpx;
		border-radius: 120rpx;
		color: $theme-color;
		font-size: 30rpx;
		background: #f5f5f5;
	}
	.invitation-logo{
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		height: 86rpx;
		background-color: $theme-color;
		border-radius: 120rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.invitation{
		width:100%;
		box-sizing:border-box;
		min-height:100vh;
		&_content{
			margin-bottom: 20rpx;
			margin-top: 44rpx;
			span{
				display: flex;
				justify-content: end;
				font-size: 28rpx;
				@include main_color(theme);
			}
		}
		&-input{
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			line-height:120rpx;
			border:0;
			margin-bottom:20rpx;
			input{
				text-align: right;
				flex: 1;
				&::-webkit-input-placeholder{
					color: #B8B8B8;
				}
				&::-moz-placeholder{
					color: #B8B8B8;
				}
				&::-ms-input-placeholder{
					color: #B8B8B8;
				}
			}
			
		}
	}
	.model-item{
		display: flex;
		margin-bottom: 20rpx;
	}
	.model-text1{
		width: 30rpx;
		font-size: 28rpx;
		color: #555555;
		line-height: 45rpx;
		flex-shrink: 0;
	}
	.model-text2{
		flex: 1;
		font-size: 28rpx;
		color: #555555;
		line-height: 45rpx;
	}
	.model-body{
		padding: 60rpx 30rpx;
	}
</style>
